import { Component } from "react";
import '../../style/form.scss'
class Form extends Component {
  state = { 
    isShow:false,//switch开关
    list:[
      {id:0,title:'线上活动',checkbox:false},
      {id:1,title:'推广类',checkbox:false},
      {id:2,title:'线下活动',checkbox:false},
      {id:3,title:'品牌介绍',checkbox:false},
    ],//活动类型
    tel:'',//报名电话
    occupation:'',//目前职业
    sponsor:[
      {id:0,title:'淘宝',radio:true},
      {id:0,title:'京东',radio:true},
    ],
    date:'',//月份
    time:'',//时分秒
    select:'biejing',//城市
    textarea:'',//描述
    sex:'1'
   }
   //switch开关
   ChangeSwicth=()=>{
    this.setState({
      isShow:!this.state.isShow
    })
   }
   //下拉
   ChangSelect=(e)=>{ 
    //  console.log(e.target.value);
     this.setState({
        select:this.state.select
     })
   }
  //日期 月份
  ChangDate=(e)=>{
    console.log(e.target.value);
    this.setState({
      date:e.target.value
    })
  }
  //时分秒
  ChangTime=(e)=>{
    // console.log();
    this.setState({
      time:e.target.value
    })
  }
  //报名电话
  ChangTel=(e)=>{
    this.setState({
      tel:e.target.value
    })
  }
  //目前职业
  Changeoccupation=(e)=>{
    console.log(e.target.value);
    this.setState({
      occupation:e.target.value
    })
  }
  //描述
  Changtextarea=(e)=>{
    console.log(e.target.value);
    this.setState({
      textarea:e.target.value
    })
  }
  //活动类型
  onChangeActivitytype=(e)=>{
     console.log(e.target.value);
  }
  
  onChangeSex=(e)=>{
    console.log(e.target.value);
    this.setState({
      sex:e.target.value
    })
  }
  //提交
  onSubmitForm=(e)=>{
    console.log(e);
     e.preventDefault()
     console.log(this.state);
  }

  render() { 
    return (
    <>
     <form onSubmit={this.onSubmitForm} className="form">
         <div className="warpper">
           <div className="font">
             <p className="font1">活动名称</p>
             <p className="font1">城市</p>
             <p className="font1">日期</p>
             <p className="font1">报名电话</p>
             <p className="font1">允许电话沟通</p>
             <p className="font1">目前职业</p>
             <p className="font1">活动类型</p>
             <p className="font2">活动赞助商</p>
             <p className="font1">描述</p>
           </div>
           <div className="inputright">
           <input type="text" disabled="disabled" placeholder="前端前景技术发展交流" className="input"/>
           <select className="select" onChange={this.ChangSelect}>
                <option value="biejing">北京</option>
                <option value="shanghai">上海</option>
                <option value="zhangjiakou">张家口</option>
            </select>
            <div className="date">
              <input type="text" placeholder="月份" onChange={this.ChangDate} className="dateinput"/> - 
              <input type="text"  onChange={this.ChangTime} placeholder="时-分"className="dateinput"/>
            </div>
            <input type="text" placeholder="报名电话" onChange={this.ChangTel} className="tel"/>
            <div onClick={this.ChangeSwicth}  className={!this.state.isShow?'switch':'switchsi'}>
                <div className={this.state.isShow?'switchsize2':'switchsize'}></div>
            </div>
            <input type="text" placeholder="目前职业" onChange={this.Changeoccupation} className="occupation"/>
             <div className="check">
                {
                 this.state.list.map((item,index)=>{
                    return (
                      
                        <label key={item.id}>
                          <div className="checkb">
                            <input type="checkbox" className="activitytype" onChange={this.onChangeActivitytype}
                            value={item.title}/> 
                            <span className="span">{item.title}</span>
                          </div>  
                        </label>
                      
                      )
                    })
                }     
             </div>
            <input type="radio" className="radio" value="1" checked={this.state.sex==='1'}  onChange={this.onChangeSex}/>
            <span className="span">淘宝</span>
            <input type="radio" className="radio1" value="2" checked={this.state.sex==='2'}  onChange={this.onChangeSex}/>
            <span className="span">京东</span>
            <div className="textarea">
              <textarea className="wenben" onChange={this.Changtextarea}></textarea>
            </div>
            <button className="btn" type="submit">提交</button>
            <button type="reset" className="reset">重置</button>
          </div>
        </div>
     </form>
    </>);
  }
}
 
export default Form;